<template>
  <myDisplayWrap breadcrumbs="我的意见反馈">
    <a-row class="userBox">
      <a-row class="titleBar">我的意见反馈</a-row>
      <a-form :form="form">
        <a-row class="collectionOperate" style="margin-left:-30px;">
          <a-col :span="8">
            <a-form-item label="内容" :label-col="{ xxl: 7, xl: 8 }" :wrapperCol="{ xxl: 17, xl: 16 }">
              <a-input v-decorator="['projectTitleOrNum']" placeholder="请输入项目信息" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="状态" :label-col="{ xxl: 7, xl: 8 }" :wrapperCol="{ xxl: 17, xl: 16 }">
              <a-select allowClear style="width: 200px;" v-decorator="['status']" placeholder="状态">
                <a-select-option v-for="brand in tabList" :title="brand.name" :key="brand.dataSource">
                  {{ brand.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8" style="padding-top: 6px; padding-right:22px;" class="TAR">
            <a-button type="primary" :ghost="true" @click="loadData(true)">
              <a-icon type="search" />查询
            </a-button>
            <a-button @click="resetBtn">
              <a-icon type="reload" />重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-row>
        <a-table :pagination="false" :columns="columns" :data-source="collectionGoods" bordered
                 :row-key="record=>record.id" :loading="tableLoading">
          <div slot="status" slot-scope="text" >
            {{ statusMap[text] }}
          </div>

          <div slot="projectTitle" slot-scope="text,record" >
            <p>{{ record.projectNum }}</p>
            <p style="color:#0078FE ;cursor: pointer;">{{ record.projectTitle }}</p>
          </div>

          <span slot="budgetAmount" slot-scope="text">{{ text | priceFilter }}</span>
          <span slot="supplySelMeth" slot-scope="text">
            {{ text == '1' ? '公开邀请' : '指定邀请' }}
          </span>
          <div slot="operate" slot-scope="text,record">
            <span style="color: #0078FE;margin-right: 10px;" @click="toDetail(record.id)">详情</span>
          </div>
        </a-table>
        <a-row style="margin-top:10px;">
          <a-col :span="7">
            <div>共 {{ total }} 条记录 第 {{ pageInfo.page }} / {{ Math.ceil(total / pageInfo.limit) }} 页</div>
          </a-col>
          <a-col :span="17">
            <a-pagination style="float:right;" :current="pageInfo.page" :pageSizeOptions="pageSizeOptions"
                          :total="total" showSizeChanger showQuickJumper :pageSize="pageInfo.limit"
                          @showSizeChange="onShowSizeChange" @change="pageChange">
              <template slot="buildOptionText" slot-scope="props">
                <span>{{ props.value }}条/页</span>
              </template>
            </a-pagination>
          </a-col>
        </a-row>
      </a-row>
    </a-row>
  </myDisplayWrap>
</template>

<script>
import myDisplayWrap from './components/myDisplayWrap.vue'
import { listPage } from "@/api/feedback/index.js";
import {isEmpty} from "@/utils/func";
import { reactive } from 'vue';
const statusMap = {
  0: '未回复',
  1: '已回复',
}
export default {
  components: {
    myDisplayWrap
  },
  data() {
    return {
      //表格加载圈
      tableLoading: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 80,
          customRender: (value, row, index) => `${index + 1}`
        },
        {
          title: '内容',
          dataIndex: 'appealsContent',
          // scopedSlots: { customRender: 'projectTitle' },
          align: 'center',
          width: "250px"
        },
        {
          title: '提交时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          dataIndex: '',
          scopedSlots: { customRender: 'operate' },
          align: 'center'
        },
      ],
      //商品集合
      collectionGoods: [],

      pageSizeOptions: ['5', '10', '15', '20'],
      total: 0,//商品总数
      pageInfo: {
        limit: 10,
        page: 1
      },
      form: this.$form.createForm(this, { name: "mySourcing" }),
      tabList: [{
        dataSource: '',
        name: '全部'
      }, {
        dataSource: '0',
        name: '未回复'
      }, {
        dataSource: '1',
        name: '已回复'
      }],
      currentTab: '',
      statusMap
    }
  },
  mounted() {
    this.loadData()
  },
  filters:{
    priceFilter(value){
      return '￥'+value;
    }
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      this.pageInfo.page =  1;
      this.pageInfo.limit = pageSize;
      this.loadData();
    },
    pageChange(pageNumber) {
      this.pageInfo.page = pageNumber;
      this.pageInfo.limit;
      this.loadData();
    },
    loadData(flag) {
      this.form.validateFields((error, values) => {
        console.log(values, 'value')
        if(flag) {
          this.pageInfo.page =  1;

        }
        console.log('hasPermt',this.$store.state.permCodes);
        console.log('hasPermt',this.hasPerm('api.feedbackApi'));
        let params = {
          queryType: 0,
          ...this.pageInfo
        }
        if(!isEmpty(values.time)) {
          params.quotationDeadlineStart = values.time[0] + ' 00:00:00'
          params.quotationDeadlineEnd = values.time[1] + ' 23:59:59'
        }
        params.projectTitleOrNum = values.projectTitleOrNum
        params.status = values.status ?  values.status : undefined
        params.supplySelMeth = values.supplySelMeth ?  values.supplySelMeth : undefined
        listPage(params).then(res => {
          if(res.code == 0) {
            this.collectionGoods = res.data.records
            this.total = res.data.total
            this.pageInfo.limit = res.data.size
            this.pageInfo.page = res.data.current
          }
        })
      })
    },
    resetBtn() {
      this.form.resetFields();
      this.loadData(true)
    },
    toDetail(id){
      console.log('params',id)
      this.$router.push({
        path: '/feedbackDetails',
        query: {id}
      })
    },
  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
.topBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;

  /*justify-content: space-around;*/
  .btn-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin-right: 30px;
    margin-bottom: 5px;
    padding: 0 20px;
    font-size: 14px;
    color: #4e4e4e;
    border: #cccc 1px solid;
    border-radius: 18px;
    cursor: pointer;

    &:hover {
      color: var(--antd-wave-shadow-color);
      border-color: var(--antd-wave-shadow-color);
    }

    &:last-child {
      margin-right: 0;
    }

    &.topButtonActive {
      background-color: var(--antd-wave-shadow-color);
      color: white;
      border-color: var(--antd-wave-shadow-color);
    }
  }
}


.userBox {
  padding: 0 24px;
  border-left: 4px solid #cccccc;
  margin-left: -1px;
  min-height: 650px;
}

.titleBar {
  width: 100%;
  height: 50px;
  line-height: 30px;
  padding: 10px;
  margin-bottom: 20px;
  background: #fff;
  border-bottom: 1px dashed #ccc;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
</style>
